<template>
  <div class="projectProgress">
    <div class="top-head">
      <div class="item">
        <p class="title">
          <span>新立项目</span>
          <span class="num">{{newProject?.value??0}}</span>
        </p>
      </div>
      <div class="item">
        <p class="title">
          <span>延期项目</span>
          <span class="num">{{project?.value??0}}</span>
        </p>
      </div>
    </div>
    <ChartComp :id="id?id:'projectProgress'"
      height="70%"
      :message="projectProgressMessage" />
  </div>
</template>

<script>
import { getFinishStatistics } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      projectProgressMessage: {},
      newProject: {},
      project: {}
    }
  },
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getFinishStatistics({ year: this.year }).then(res => {
        if (res.data && res.data.length > 0) {
          this.newProject = res.data[0]
          this.project = res.data[1]
          this.projectProgressMessage = {
            legend: {
              show: false,
              top: '5%',
              left: 'center',
              icon: 'rect', // 形状
              itemWidth: 12, // 宽
              itemHeight: 12, // 高
              textStyle: {
                //图例文字的样式
                color: '#ccc',
                fontSize: 16
              }
            },
            tooltip: {
              trigger: 'item',
              axisPointer: {
                type: 'line'
              },
              textStyle: {
                color: '#fff'
              },
              className: 'LineChart-tooltip',
              extraCssText: `background-color: rgba(0, 21, 50, 0.8);
              color: #fff;
              border: 1px solid #214D87;
              border-color: #214D87;
              box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
              border-radius: 4px;`
            },
            series: [
              {
                name: '项目进展',
                type: 'pie',
                avoidLabelOverlap: true, // 是否启用防止标签重叠策略
                center: ['50%', '60%'],
                data: [
                  {
                    value: Number(this.newProject?.scale ?? 0),
                    name: '新立项项目',
                    itemStyle: {
                      //颜色渐变
                      color: new this.$echarts.graphic.LinearGradient(
                        1,
                        1,
                        1,
                        0, //(上-下 渐变)
                        [
                          { offset: 0, color: '#0085FF' },
                          { offset: 1, color: '#9ED0FF' }
                        ]
                      )
                    }
                  },
                  {
                    value: Number(this.project?.scale ?? 0),
                    name: '延期项目',
                    itemStyle: {
                      //颜色渐变
                      color: new this.$echarts.graphic.LinearGradient(
                        1,
                        1,
                        1,
                        0, //(上-下 渐变)
                        [
                          { offset: 0, color: '#FF7F7F' },
                          { offset: 1, color: '#F70000' }
                        ]
                      )
                    }
                  }
                ],
                labelLine: {
                  show: true
                },
                itemStyle: {
                  borderRadius: 0,
                  borderColor: '#001D40',
                  borderWidth: 2
                  // borderWidth: 10, //设置边框粗细
                  // borderColor: 'rgb(9,37,71, 0.5)' //边框颜色
                },
                label: {
                  formatter: '{b}\n\n{c}%',
                  color: '#B5C5D4'
                }
              }
            ]
          }
        } else {
          this.projectProgressMessage = {}
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.projectProgress {
  height: 100%;
}
.top-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .item {
    position: relative;
    width: 40%;
    padding: 16px 20px 16px 30px;
    background: url('~@/assets/img/chartChard.png') no-repeat;
    background-size: 100% 100%;
    &::before {
      display: inline-block;
      content: '';
      width: 6px;
      height: 6px;
      background: #12f6ff;
      position: absolute;
      left: 14px;
      top: 24px;
      z-index: 4;
    }
    &:nth-child(2) {
      &::before {
        background: #ff3d1e;
      }
    }
    .title {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      font-size: 14px;
      .num {
        font-size: 18px;
        font-weight: bold;
        padding-top: 12px;
      }
    }
  }
}
</style>